<template>
    <view class="content">
        <map
			style="width: 100%; height: 100%;"
			:show-location="true"
			:scale="18"
			:latitude="latitude"
			:longitude="longitude"
			:enable-satellite="true"
			:rotate="rotate"
		>
		</map>
		<view class="crosshair"></view>
		<image
			src="@/static/images/compass.png"
			mode="scaleToFill"
			class="compass"
		></image>
			<movable-area v-if="houseInfo.url" class="move-area">
				<image :src="houseInfo.url" class="house"></image>
				<!-- <image src="@/static/images/demo.jpeg" class="house"></image> -->
				<movable-view
					v-for="(item, index) in dots"
					:key="index"
					direction="all"
					:x="item.x"
					:y="item.y"
					class="red-dot"
					@change="dotChange($event, index)"
					@click="clickTag(item, index)"
				>
				</movable-view>
			</movable-area>
			<!-- <view class="opt-group">
				<u-row justify="space-between">
					<u-button type="primary" :plain="true" text="取消" @click="cancleHandle"></u-button>
					<u-button type="primary" text="确定" @click="submitInfo"></u-button>
				</u-row>
			</view> -->
			<view v-if="houseInfo.url" class="opt-group">
				<u-row justify="space-between">
					<u-button type="primary" :plain="true" text="取消" @click="cancleHandle"></u-button>
					<u-button type="primary" text="确定" @click="submitInfo"></u-button>
				</u-row>
			</view>
		<uni-fab
			ref="fab"
			:pattern="pattern"
			:content="content"
			horizontal="right"
			vertical="top"
			direction="horizontal"
			@trigger="trigger"
			@fabClick="fabClick"
		/>
		<Dialog ref="dialogRef"/>
		<OwnerInfoDia ref="ownerRef" @ownerSuccess="uploadFile"/>
	</view>
</template>
<script>
import Dialog from './dialog'
import OwnerInfoDia from './ownerInfo'
export default {
	components: {
		Dialog,
		OwnerInfoDia
	},
	data() {
		return {
			latitude: 31.854998,
			longitude: 117.132595,
			pattern: {
				color: '#7A7E83',
				backgroundColor: '#fff',
				selectedColor: '#007AFF',
				buttonColor: '#007AFF',
				iconColor: '#fff'
			},
			content: [
				{
					iconPath: '/static/images/location.png',
					selectedIconPath: '/static/images/location.png',
					text: '定位',
					active: false
				},
				{
					iconPath: '/static/images/image.png',
					selectedIconPath: '/static/images/image.png',
					text: '上传',
					active: false
				},
				{
					iconPath: '/static/images/tag.png',
					selectedIconPath: '/static/images/tag.png',
					text: '标记',
					active: false
				},
			],
			houseInfo: {
				id: '',
				url: ''
			},
			dots: [],
			rotate: 0
		};
	},
	mounted() {
		this.getLocal(false)
		wx.onCompassChange((res) => {
			let degree = res.direction.toFixed(0);
			this.rotate = 360 - degree
			// this.setData({
			// 	rotate:360 - degree
			// })
		})
	},
	methods: {
		getLocal(flag) {
		    uni.getLocation({
		    	type: 'wgs84',
				isHighAccuracy: true,
		    	success: (res) => {
					if (flag) {
						this.$modal.msgSuccess('定位成功')
					}
					this.latitude = res.latitude
					this.longitude = res.longitude
		    	}
		    });
		},
		beforeUpload() {
			this.$refs.ownerRef.showDialog()
		},
		uploadFile(item) {
			const {ownerName, ownerBirth} = JSON.parse(item)
			uni.chooseImage({
				success: (chooseImageRes) => {
					const {tempFilePaths} = chooseImageRes;
					uni.uploadFile({
						url: 'http://59.110.53.153:7001/mp/api/access/house/upload', // 仅为示例，非真实的接口地址
						filePath: tempFilePaths[0],
						name: 'file',
						formData: {
							'user': 'test',
							longitude: this.longitude,
							latitude: this.latitude,
							ownerName,
							ownerBirth
						},
						success: (uploadFileRes) => {
							const result = JSON.parse(uploadFileRes.data)
							if (result.code == 200) {
								this.$modal.msgSuccess('上传成功')
								this.houseInfo.id = result.data.id
								this.houseInfo.url = result.data.url
							} else {
								this.$modal.msgError('上传失败')
							}
						}
					});
				}
			});
		},
		trigger(e) {
			// this.content[e.index].active = !e.item.active
			if (e.index === 0) {
				this.getLocal(true)
			} else if (e.index === 1) {
				this.beforeUpload()
			} else if (e.index === 2) {
				if (!this.houseInfo.id) {
					this.$modal.msg('请先上传户型图')
					return
				}
				this.dots.push({
					x: '50',
					y: '50',
					name: '',
					position: ''
				})
			}
		},
		fabClick() {

		},
		dotChange(e, index) {
			this.dots[index].x = e.target.x
			this.dots[index].y = e.target.y
		},
		clickTag(item, i) {
			this.$refs.dialogRef.showDialog(item)
		},
		// 取消
		cancleHandle() {
			this.houseInfo = {
				id: '',
				url: ''
			}
			this.dots = []
		},
		submitInfo() {
			this.$tab.navigateTo('/pages/detail/index')
		}
	}
}

</script>
<style lang="scss" scoped>
.content {
	position: relative;
	height: 100vh;
	width: 100vw;
}
.compass {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 720rpx;
  height: 720rpx;
  pointer-events: none;
}
.house {
//   position: absolute;
//   top: 50%;
//   left: 50%;
//   transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
}
.move-area {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 550rpx;
  height: 550rpx;
  // background-color: #fff;
}
.red-dot {
  min-width: 20px;
  height: 20px;
  line-height: 20px;
  font-size: 10px;
  background-color: red;
  border-radius: 50%;
}
.opt-group {
  position: absolute;
  width: 550rpx;
  top: 80%;
  left: 50%;
  transform: translate(-50%, 0%);
}
.crosshair {
    height: 100%;
    width: 100%;
	pointer-events: none;
}
.crosshair::before,
.crosshair::after {
    content: '';
    position: absolute;
    background-color: red;
}

.crosshair::before {
    width: 100%;
    height: 4rpx; /* 横线的粗细 */
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.crosshair::after {
    height: 100%;
    width: 4rpx; /* 竖线的粗细 */
    left: 50%;
    top: 0;
    transform: translateX(-50%);
}
</style>
